<template>
    <div>
        <keyword-dialog ref="add" @change="loadView"></keyword-dialog>

        <el-row>
            <el-col :span="16">
                <div class="words">
                    <div class="header">
                        <el-button type="primary" size="mini" @click="onAddKeyword">添加监控词</el-button>
                    </div>
                    <div class="table">
                        <el-table
                                :data="keywords.items"
                                v-if="enabled"
                        >
                            <el-table-column
                                    prop="keyword_id"
                                    label="搜索词ID"
                            />
                            <el-table-column
                                    prop="keyword"
                                    label="搜索词"
                            />
                            <el-table-column
                                    label="操作"
                                    width="65px"

                            >
                                <template slot-scope="keyword">

                                    <el-button type="text" size="mini" @click="onRemoveKeyword(keyword.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="disable" v-if="!enabled">
                        <h4>明星尚未开启净化功能</h4>
                        <div>
                            <el-button
                                    @click="onOpenClean"
                                    :loading="loading"
                            >点击开启</el-button></div>
                    </div>
                </div>

            </el-col>
            <el-col :span="8">
                <div class="hot">
                    <el-collapse v-model="active" accordion>
                        <el-collapse-item
                                v-for="item in hots.keywords"
                                :title="`${item.keyword} [${item.words.length}]`"
                                :name="item.keyword_id" class="keyword-item">
                            <div class="word-items">
                                <div
                                        v-for="word in item.words"
                                        class="word-item">
                                    <div class="word-name">
                                        <div class="word-index">
                                            {{word.index}}.
                                        </div>
                                        <div :class="{'selected' : word.selected}">{{word.word}}</div>
                                    </div>
                                    <div class="word-score">
                                        {{word.score}}
                                    </div>
                                </div>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </el-col>
        </el-row>

    </div>

</template>

<script lang="ts">

    import {Vue,Component,Prop, Watch} from 'vue-property-decorator'
    import {Api} from '@/api/clean'
    import KeywordDialog from './clean/AdminAddKeyword'

    @Component({
        name:"AdminStarCleanView",
        components: {
            KeywordDialog
        }
    })
    export default class AdminStarCleanView extends Vue {

        @Prop({
            type:String
        })
        value: string;

        keywords: Api.Clean.GetKeywordsResponse = {
            items: []
        };

        hots:Api.Clean.GetWordListResponse = {
            keywords:[]
        };

        enabled:boolean = true;
        loading:boolean = false;
        active:string = "";

        @Watch('value')
        onValueChange(oldValue,newValue) {
            this.loadView();
        }

        mounted() {
            this.loadView()
        }

        loadView() {
            Api.Clean.GetKeywords({star_id: this.value})
                .then((ack) => {
                    this.keywords = ack;

                    if(this.keywords.items.length === 0) {
                        this.enabled = false;
                    }else{
                        this.enabled = true;
                    }
                }).catch(()=>{
                    this.enabled = true;
            })

            Api.Clean.GetWordList({star_id:this.value})
                .then((ack) => {
                    this.hots = ack;
                })
        }

        onRemoveKeyword(row:any) {
            this.$confirm('确定要移除搜索关键字?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                Api.Clean.RemoveKeyword({
                    keyword_id:row.keyword_id,
                    star_id:this.$route.params['id']})
                    .then((ack) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });

                        this.loadView()
                    })

            }).catch((err) => {

                console.log(err)
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }

        onOpenClean() {

            this.loading = true;

            Api.Clean.EnableClean({star_id:this.value})
                .then((ack) => {
                    this.loading = false;
                    this.enabled = true;
                    this.loadView();
                }).catch(()=>{
                    this.loading = false;
                    this.enabled = false;
            })
        }

        onAddKeyword() {
            let dialog:any = this.$refs['add'];

            dialog.show(this.value)
        }
    }
</script>

<style lang="scss" scoped>
    .disable {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .keyword-item {
        max-height: 449px;

        ::-webkit-scrollbar {
            width: 4px;
        }

        ::-webkit-scrollbar-thumb {
            width: 4px;
            background: lighten(#545c64,30%);
            border-radius:2px ;
        }
    }

    .word-items {
        overflow-x: hidden;
        overflow-y: scroll;
        max-height: 400px;


        .word-item {
            padding: 2px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            color: #606266;




            &:hover {
                background: #EBEEF5;
            }

            .word-name {
                display: flex;
                flex-direction: row;

                .word-index {
                    width: 20px;
                }

                .selected {
                    color: #67C23A;
                }

                .word-score {
                    padding-right: 5px;
                }
            }
        }
    }


    .words {
        padding-right: 5px;
    }
    .header {
        float: right;
    }

    .hot {
        padding-left: 5px;
        border-left: 1px solid #E4E7ED;
    }
</style>